<template>
    <div class="container-fluid">
        <div class="container-fluid bg-msg">
            <div class="container">
                <div class="site-info">
                    <p class="site-msg">您好，欢迎访问闫亚松的博客，专注前端学习的资源，解决问题，系统学习html css js的网站</p>
                </div>
            </div>
        </div>
        <div class="container-fluid bg-white">
            <div class="container">
                <div class="nav-bar clearfix">
                    <div class="logo fl">个人LOGO</div>
                    <ul class="bar-wrap clearfix fr">
                        <li class="tab-item fs18 active">网站首页</li>
                        <li class="tab-item fs18">网站首页</li>
                        <li class="tab-item fs18">网站首页</li>
                        <li class="tab-item fs18">网站首页</li>
                        <li class="tab-item fs18">网站首页</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        name: "nav-bar"
    }
</script>

<style scoped lang="scss">
    .site-info{
        color: #ccc;
        font-size: 14px;
        height: 35px;
        line-height: 35px;
    }
    .site-msg{}
    .nav-bar{
        background-color: #fff;
        height: 70px;
        line-height: 70px;
    }
    .bar-wrap{
        .tab-item{
            padding: 0 15px;
            float: left;
            color: #444;
            transition: all 0.3s;
            &.active{
                color: #0077dd;

            }
            &:hover{
                color: #0077dd;
                cursor: pointer;
            }
        }
    }
</style>